<template>
  <div class='container'>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="card">
          <div slot="header" class="clearfix">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          </div>
          <div class="card-body">
            <el-tree
              ref="tree" :props="props" :data="data" :highlight-current="false" node-key="id"
              :default-expand-all="true" :filter-node-method="filterNode" :render-content="renderContent"
            ></el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            {{tableName}}
          </div>
          <div class="card-body">
            <div v-if="showButton" style="margin-bottom: 12px;">
              <el-button class="el-icon-upload" style="margin-right: 10px;" @click="handleImageAdd"
                type="success">&nbsp;上传图片
              </el-button>
              <!--<el-button style="margin-right: 10px;" @click="handleImageDelete" type="primary">删除</el-button>-->
            </div>
            <el-table stripe row-key="pictureUrl"
              :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit
              highlight-current-row @selection-change="handleSelectionChange"
              style="width: calc(100vw - 470px)"
            >
              <!--<el-table-column align="center" type="selection" width="55">-->
              <!--</el-table-column>-->
              <!--<el-table-column align="center" type="index" label="序号" width="55">-->
              <!--</el-table-column>-->
              <el-table-column align="center" label="图片预览" width="480">
                <template slot-scope="scope">
                  <img style="max-height: 270px!important;" :src="scope.row.pictureUrl" :alt="scope.row.pictureName">
                </template>
              </el-table-column>
              <el-table-column align="center" label="标签">
                <template slot-scope="scope">
                  <el-tag v-for="(tag, index) in scope.row.tagList" size="mini" :key="index"
                    style="margin: 3px">{{ tag.relationName }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                  <span>{{scope.row.createTime}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center" label="操作" width="150" class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      style="width: auto" class="button-icon el-icon-edit"
                      type="primary" size="mini" @click="handleUpdate(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      style="width: auto" class="button-icon el-icon-delete"
                      type="danger" size="mini" @click="handleDelete(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageNum"
                :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="centerDialogVisible"
      width="40%" center>
      <el-form :rules="rules" class="form" ref="formCreate" :model="formCreate" label-width="110px">
        <el-form-item label="图库名称" prop="name">
          <el-input v-model="formCreate.name"></el-input>
        </el-form-item>
        <el-form-item label="所属栏目" prop="classChoose">
          <el-popover
            placement="bottom-start"
            trigger="click"
            @show="filterText5 = ''"
          >
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText5">
            </el-input>
            <el-tree
              :filter-node-method="filterNode"
              ref="tree5" :props="props" :data="treeList" :highlight-current="false" node-key="code"
              :default-expanded-keys="[0]" :render-content="renderClassContent"
            >
            </el-tree>
            <el-select
              :clearable="true" multiple value-key='id'
              popper-class="hide" slot="reference" v-model="formCreate.classChoose" type="text"
              placeholder="请输入"
            >
              <el-option
                v-for="(item, index) in options" v-show="false" :key="index" :value="item.id" :label="item.name"
              ></el-option>
            </el-select>
          </el-popover>
        </el-form-item>
        <div style="text-align: center">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button v-if="dialogStatus=='create'" type="primary" @click="append()">确认</el-button>
          <el-button v-else type="primary" @click="edit()">确认</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" @close="pictureList = []" :title="'为图库'+tableName+'新增图片'"
      :visible.sync="dialogFormVisible"
      width="805px">
      <el-form
        :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="130px"
        style='margin: 24px;'
      >
        <el-form-item label="新增图片" prop="pictureList">
          <el-upload
            :action="imageUploadUrl"
            :headers="{Authorization: 'Bearer ' + $store.getters.token}"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :multiple="true"
            :on-preview="handlePictureCardPreview"
            :on-remove="handlePictureCardRemove"
            :on-success="handlePictureCardCallback"
            :file-list="pictureList">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="imageVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="addImage">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="编辑图片标签" :visible.sync="imageFormVisible"
      width="805px">
      <el-form
        ref="imageForm" :model="temp" label-position="left" label-width="130px"
        style='margin: 24px;'
      >
        <el-form-item label="图片">
          <img style="max-height: 300px" :src="tempImageInfo.pictureUrl" alt="">
        </el-form-item>
        <!--<el-form-item label="栏目标签" prop="newsClassId">-->
        <!--<el-popover-->
        <!--placement="bottom-start"-->
        <!--trigger="click"-->
        <!--@show="filterText6 = ''"-->
        <!--&gt;-->
        <!--<el-input-->
        <!--placeholder="输入关键字进行过滤"-->
        <!--v-model="filterText6">-->
        <!--</el-input>-->
        <!--<el-tree-->
        <!--:filter-node-method="filterNode"-->
        <!--ref="tree6" :props="props" :data="treeList" :highlight-current="false" node-key="code"-->
        <!--:default-expanded-keys="[0]" :render-content="renderClassContent2"-->
        <!--&gt;-->
        <!--</el-tree>-->
        <!--<el-select-->
        <!--:clearable="true" :multiple="true"-->
        <!--popper-class="hide" slot="reference" v-model="tempImageInfo.classTag" type="text"-->
        <!--placeholder="请输入"-->
        <!--&gt;-->
        <!--<el-option-->
        <!--v-for="(item, index) in options" v-show="false" :key="index" :value="item.id" :label="item.name"-->
        <!--&gt;</el-option>-->
        <!--</el-select>-->
        <!--</el-popover>-->
        <!--</el-form-item>-->
        <el-form-item label="词汇标签">
          <el-select v-model="tempImageInfo.wordTag" :clearable="true"
            remote reserve-keyword :remote-method="filterWord" multiple
            filterable placeholder="请选择">
            <el-option
              v-for="(item,index) in filterWordList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="板块标签">
          <el-select v-model="tempImageInfo.plateTag" :clearable="true"
            remote reserve-keyword :remote-method="filterPlate" :multiple="true"
            filterable placeholder="请选择">
            <el-option-group
              v-if="filterPlateList.filter(e => e.type === 0).length"
              key="概念板块"
              label="概念板块">
              <el-option
                v-for="(item,index) in filterPlateList.filter(e => e.type === 0)"
                :key="item.code"
                :label="item.name+'('+item.code+')'"
                :value="item.code">
              </el-option>
            </el-option-group>
            <el-option-group
              v-else-if="filterPlateList.filter(e => e.type === 1).length"
              key="行业板块"
              label="行业板块">
              <el-option
                v-for="(item,index) in filterPlateList.filter(e => e.type === 1)"
                :key="item.code"
                :label="item.name+'('+item.code+')'"
                :value="item.code">
              </el-option>
            </el-option-group>
            <el-option-group
              v-else-if="filterPlateList.filter(e => e.type === 2).length"
              key="原创板块"
              label="原创板块">
              <el-option
                v-for="(item,index) in filterPlateList.filter(e => e.type === 2)"
                :key="item.code"
                :label="item.name+'('+item.code+')'"
                :value="item.code">
              </el-option>
            </el-option-group>
            <template  v-else>
              <el-option
                v-for="(item,index) in filterPlateList"
                :key="item.code"
                :label="item.name+'('+item.code+')'"
                :value="item.code">
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="股票标签">
          <el-select :clearable="true"
            v-model="tempImageInfo.stockTag" :multiple="true"
            remote reserve-keyword :remote-method="filterStock"
            filterable placeholder="请选择">
            <el-option
              v-for="(item,index) in filterStockList"
              :key="item.code"
              :label="item.name+'('+item.code+')'"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="imageFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="updateImage">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    galleryAll, galleryAdd, galleryUpdate, galleryClass, galleryPictureList, imageWordList,
    imageUploadUrl, galleryPictureAdd, galleryPictureUpdate, galleryPictureDelete
  } from '../../api/imageManagement'
  import { classList, articleAllPlateList, articleStockList } from '../../api/article'
  import pinyin from 'pinyin'

  export default {
    name: 'columnList',
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      filterText5(val) {
        this.$refs.tree5.filter(val)
      },
      filterText6(val) {
        this.$refs.tree6.filter(val)
      },
      pictureList() {
        this.temp.pictureList = this.pictureList.map(e => {
          if (e.response) {
            return e.response.Data[0]
          } else {
            return e
          }
        })
      }
    },
    created() {
      this.getList()
      this.getClass()
      this.getPlateList()
      this.getStockList()
      this.getWordList()
    },
    methods: {
      getList() {
        galleryAll({
          pageNum: 1,
          pageSize: 10000
        }).then(response => {
          this.data[0].children = response.Data
        })
      },
      getClass() {
        const params = {
          pageNum: 1,
          pageSize: 99999
        }
        classList(params).then(response => {
          const temp = {}
          const result = []
          const data = response.Data
          const length = data.length
          for (let i = 0; i < length; i++) {
            temp[data[i].id] = data[i]
            this['options'].push(data[i])
          }
          for (let i = 0; i < length; i++) {
            if (temp[data[i].id].parentId && temp[data[i].parentId]) {
              if (!temp[data[i].parentId].children) {
                temp[data[i].parentId].children = []
              }
              temp[data[i].parentId].children.push(temp[data[i].id])
            } else {
              result.push(temp[data[i].id])
            }
          }
          this['treeList'][0].children = result
        })
      },
      getPlateList() {
        articleAllPlateList({
          pageNum: 1,
          pageSize: 99999
        }).then(response => {
          this.allPlateList = response.Data
        })
      },
      getStockList() {
        articleStockList({
          pageNum: 1,
          pageSize: 99999
        }).then(response => {
          this.allStockList = response.Data
        })
      },
      getWordList() {
        imageWordList({
          pageNum: 1,
          pageSize: 99999
        }).then(response => {
          this.allWordList = response.Data
        })
      },
      renderClassContent(h, { node, data, store }) {
        return (
          <span class={(node.isLeaf && node.level > 1) ? 'custom-tree-node' : 'custom-tree-node custom-tree-notLeaf'}>
            <span>{node.label}</span>
            <span>
              {(node.level > 1 && node.isLeaf) ? <el-button
                size='mini' type='text'
                on-click={(e) => this.selectClassNode(node, data, e)}
              >选择</el-button> : ''}
            </span>
          </span>
        )
      },
      selectClassNode(node, data, e) {
        e.stopPropagation()
        // this.formCreate['classChoose'] = [data]
        const list = this.formCreate['classChoose']
        for (let i = 0; i < list.length; i++) {
          if (list[i] === data.id) return
        }
        list.push(data.id)
      },
      renderClassContent2(h, { node, data, store }) {
        return (
          <span class={(node.isLeaf && node.level > 1) ? 'custom-tree-node' : 'custom-tree-node custom-tree-notLeaf'}>
            <span>{node.label}</span>
            <span>
              {(node.level > 1 && node.isLeaf) ? <el-button
                size='mini' type='text'
                on-click={(e) => this.selectClassNode2(node, data, e)}
              >选择</el-button> : ''}
            </span>
          </span>
        )
      },
      selectClassNode2(node, data, e) {
        e.stopPropagation()
        const list = this.tempImageInfo.classTag
        for (let i = 0; i < list.length; i++) {
          if (list[i].id === data.id) return
        }
        list.push(data.id)
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1 || pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        }).join('').indexOf(value) !== -1
      },
      filterPlate(query) {
        if (query !== '') {
          let result = this.allPlateList.filter(item => {
            return item.name.indexOf(query) > -1 || item.code.indexOf(query) > -1 || pinyin(item.name, {
              style: pinyin.STYLE_FIRST_LETTER,
              heteronym: true
            }).join('').indexOf(query) > -1
          }).sort((a, b) => a.name.length - b.name.length)
          if (result.length >= 100) {
            this.$message({
              message: '菜单超过100条，只显示前100条，请输入更多信息'
            })
            result = result.slice(0, 99)
          }
          this.filterPlateList = result
        } else {
          // this.filterPlateList = []
        }
      },
      filterStock(query) {
        if (query !== '') {
          let result = this.allStockList.filter(item => {
            return item.name.indexOf(query) > -1 || item.code.indexOf(query) > -1 || pinyin(item.name, {
              style: pinyin.STYLE_FIRST_LETTER,
              heteronym: true
            }).join('').indexOf(query) > -1
          }).sort((a, b) => a.name.length - b.name.length)
          if (result.length >= 100) {
            this.$message({
              message: '菜单超过100条，只显示前100条，请输入更多信息'
            })
            result = result.slice(0, 99)
          }
          this.filterStockList = result
        } else {
          // this.filterStockList = []
        }
      },
      filterWord(query) {
        if (query !== '') {
          let result = this.allWordList.filter(item => {
            return item.name.indexOf(query) > -1 || pinyin(item.name, {
              style: pinyin.STYLE_FIRST_LETTER,
              heteronym: true
            }).join('').indexOf(query) > -1
          }).sort((a, b) => a.name.length - b.name.length)
          if (result.length >= 100) {
            this.$message({
              message: '菜单超过100条，只显示前100条，请输入更多信息'
            })
            result = result.slice(0, 99)
          }
          this.filterWordList = result
        } else {
          // this.filterWordList = []
        }
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.galleryList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val
        this.galleryList()
      },
      resetForm() {
        this.formCreate = {
          name: '',
          classId: []
        }
        this.$refs['formCreate'].resetFields()
      },
      handleCancel() {
        this.form = Object.assign({}, this.lastForm)
      },
      handleAppend(node, data, e) {
        e.stopPropagation()
        this.dialogStatus = 'create'
        this.formCreate.name = ''
        this.formCreate.classChoose = []
        this.centerDialogVisible = true
        this.$nextTick(() => {
          if (this.$refs.formCreate) this.$refs['formCreate'].clearValidate()
        })
      },
      append() {
        this.$refs['formCreate'].validate((valid) => {
          if (valid) {
            const params = {
              name: this.formCreate.name,
              relationIds: this.formCreate.classChoose
            }
            galleryAdd(params).then(() => {
              this.centerDialogVisible = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getList()
            })
          }
        })
      },
      handleEdit(node, data, e) {
        e.stopPropagation()
        this.dialogStatus = 'update'
        this.formCreate.id = data.id
        this.formCreate.name = data.name
        galleryClass({ id: data.id }).then((response) => {
          this.formCreate.classChoose = response.Data.map(e => e.relationId)
          this.centerDialogVisible = true
          this.$nextTick(() => {
            if (this.$refs.formCreate) this.$refs['formCreate'].clearValidate()
          })
        })
      },
      edit() {
        this.$refs['formCreate'].validate((valid) => {
          if (valid) {
            const params = {
              id: this.formCreate.id,
              name: this.formCreate.name,
              relationIds: this.formCreate.classChoose
            }
            galleryUpdate(params).then(() => {
              this.centerDialogVisible = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getList()
            })
          }
        })
      },
      handleGalleryShow(node, data, e) {
        e.stopPropagation()
        this.listQuery.id = data.id
        this.tableName = data.name
        this.galleryList()
      },
      galleryList() {
        this.listLoading = true
        galleryPictureList(this.listQuery).then(response => {
          this.showButton = true
          this.tableData = response.Data
          this.total = response.total * 1
          this.listLoading = false
        })
      },
      handleDelete(row) {
        this.remove({
          id: this.listQuery.id,
          relationIds: [row.pictureId]
        })
      },
      remove(deleteList) {
        this.$confirm('确认删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          galleryPictureDelete(deleteList).then(() => {
            this.galleryList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class={(node.isLeaf && node.level > 1) ? 'custom-tree-node' : 'custom-tree-node custom-tree-notLeaf'}>
            <span>
              <el-tooltip className='item' effect='dark' content={node.label} placement='top-start'>
                <span class='tree-label'>{node.label}&nbsp;</span>
              </el-tooltip>
            </span>
            <span>
              {node.level === 1
                ? <el-button size='mini' type='text' on-click={(e) => this.handleAppend(node, data, e)}>新增图库</el-button>
                : ''
              }
              {node.level > 1
                ? <el-button size='mini' type='text'
                  on-click={(e) => this.handleEdit(node, data, e)}>编辑</el-button>
                : ''
              }
              {node.level > 1
                ? <el-button size='mini' type='text'
                  on-click={(e) => this.handleGalleryShow(node, data, e)}>查看图库</el-button>
                : ''
              }
            </span>
          </span>)
      },
      resetTemp() {
        this.temp = {
          id: '',
          pictureList: [],
          classChoose: []
        }
      },
      handleImageAdd() {
        this.resetTemp()
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      addImage() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const params = {
              pictureInfo: this.temp.pictureList.map(e => {
                return {
                  pictureId: e.id
                }
              }),
              id: this.listQuery.id
            }
            galleryPictureAdd(params).then(() => {
              this.galleryList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      handleUpdate(row) {
        this.tempImageInfo.pictureId = row.pictureId
        this.tempImageInfo.pictureUrl = row.pictureUrl
        this.tempImageInfo.classTag = []
        this.tempImageInfo.wordTag = []
        this.tempImageInfo.stockTag = []
        this.tempImageInfo.plateTag = []
        this.filterWordList = []
        this.filterStockList = []
        this.filterPlateList = []
        if (row.tagList.length) {
          row.tagList.forEach((e) => {
            // if (e.type === 0) {
            //   this.tempImageInfo.classTag.push(e.relationId)
            // }
            if (e.type === 1) {
              this.tempImageInfo.wordTag.push(e.relationId)
              this.filterWordList.push({ name: e.relationName, id: e.relationId })
            }
            if (e.type === 2) {
              this.tempImageInfo.stockTag.push(e.relationId)
              this.filterStockList.push({ name: e.relationName, code: e.relationId })
            }
            if (e.type === 3) {
              this.tempImageInfo.plateTag.push(e.relationId)
              this.filterPlateList.push({ name: e.relationName, code: e.relationId })
            }
          })
        }
        this.imageFormVisible = true
        this.$nextTick(() => {
          this.$refs['imageForm'].clearValidate()
        })
      },
      updateImage() {
        let tagList = []
        // tagList = tagList.concat(this.tempImageInfo.classTag.map(e => ({ relationId: e, type: 0 })))
        tagList = tagList.concat(this.tempImageInfo.wordTag.map(e => ({ relationId: e, type: 1 })))
        tagList = tagList.concat(this.tempImageInfo.plateTag.map(e => ({ relationId: e, type: 3 })))
        tagList = tagList.concat(this.tempImageInfo.stockTag.map(e => ({ relationId: e, type: 2 })))
        const params = {
          pictureSingleInfo: {
            tagList,
            pictureId: this.tempImageInfo.pictureId
          },
          id: this.listQuery.id
        }
        galleryPictureUpdate(params).then(() => {
          this.galleryList()
          this.imageFormVisible = false
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handlePictureCardRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.imageVisible = true
      },
      handlePictureCardCallback(response, file, fileList) {
        this.pictureList = fileList
      },
      handlePictureReplace(response, file) {
        this.pictureList = [file]
      },
      handleSelectionChange(val) {
        this.multipleSelection = val.map(e => e.id)
      },
      beforeUpload(file) {
        const isJPG = [
          'image/jpeg',
          'image/svg+xml',
          'image/bmp',
          'image/webp',
          'image/vnd.dwg',
          'image/vnd.dxf',
          'image/gif',
          'image/jp2',
          'image/tiff',
          'image/vnd.svf',
          'image/png'
        ].indexOf(file.type) > -1
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('请上传图片文件！')
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 1MB!')
        }
        return isJPG && isLt2M
      },
    },

    data() {
      return {
        filterText: '',
        filterText5: '',
        filterText6: '',
        listLoading: false,
        centerDialogVisible: false,
        dialogFormVisible: false,
        dialogStatus: 'create',
        textMap: {
          update: '编辑',
          create: '新增'
        },
        total: 0,
        listQuery: {
          pageNum: 1,
          pageSize: 20,
          id: ''
        },
        props: {
          label: 'name',
          id: 'id'
        },
        data: [{
          name: '图库管理',
          id: 0,
          children: []
        }],
        rules: {
          name: [{ required: true, message: '请输入...', trigger: 'change' }],
          classChoose: [{ required: true, message: '请输入...', trigger: 'change' }]
        },
        formCreate: {
          id: '',
          name: '',
          pictureList: [],
          classChoose: []
        },
        allPlateList: [],
        filterPlateList: [],
        allStockList: [],
        filterStockList: [],
        allWordList: [],
        filterWordList: [],
        options: [],
        treeList: [{ name: '栏目列表', code: 0, children: [] }],
        temp: {
          id: '',
          pictureList: [],
          classChoose: []
        },
        tableName: '图库图表',
        tableData: [],
        showButton: false,
        pictureList: [],
        dialogImageUrl: '',
        imageVisible: false,
        imageFormVisible: false,
        imageUploadUrl,
        tempImageInfo: {
          pictureId: '',
          pictureUrl: '',
          classTag: [],
          wordTag: [],
          plateTag: [],
          stockTag: []
        }
      }
    }
  }
</script>

<style type="scss" scoped>
  .col {
    width: inherit;
  }

  .card-body {
    margin-top: 1rem;
  }

  .form {
    max-width: 500px !important;
    margin: auto !important;
  }
</style>

<style>
  .hide {
    display: none;
  }

  .el-tag {
    margin-right: 3px;
    background-color: rgba(64, 158, 255, .1);
    color: #409EFF;
    border-radius: 4px;
    padding: 0 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, .2);
  }

  .el-tag--warning {
    background-color: rgba(230, 162, 60, .1);
    border-color: rgba(230, 162, 60, .2);
    color: #e6a23c;
  }

  .tree-label {
    display: inline-block;
    max-width: 145px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 15px !important;
  }
</style>


